<template>
    <view :style="{'--color': color}">
        <status-bar :title="name + '转赠'"></status-bar>
        <view class="topBg bg00 p-re">
            <view class="card thmeBg padding40 p-ab white">
                <image :src="$imgUrls('Uploads/User_img/shadingImg.png')" mode="aspectFill" class="wh p-ab"></image>
                <view class="note p-ab" @click="toUrl('/joinPage/giftRecord?type=' + type)">
                    <text class="iconfont icon-shangpin"></text>
                    <text class="size26 m-left10">赠送记录</text>
                </view>
                <view class="size26 m-bot20">可用{{ name }}</view>
                <view class="size60">{{ v_money || 0 }}</view>
            </view>
        </view>
        <view class="padding30 m-top30">
            <view class="m-bot30">
                <view class="size26 m-bot20">赠送给：</view>
                <u-input v-model="phone" placeholder="请输入接受人手机号">
                    <template slot="suffix">
                        <view class="size26 thmeColor" @click="verifyUser">验证</view>
                    </template>
                </u-input>
            </view>
            <view class="d-flex a-center m-bot30" v-if="doneeInfo">
                <image :src="$imgUrls(doneeInfo.v_headimg)" mode="aspectFill" class="avatar"></image>
                <view class="p-left30 color_33">
                    <view class="size32 bold m-bot4">{{ doneeInfo.v_name }}</view>
                    <view class="size26">{{ doneeInfo.v_tel }}</view>
                </view>
            </view>
            <view class="m-bot30">
                <view class="size26 m-bot20">赠送{{ name }}：</view>
                <u-input v-model="money" :placeholder="'请输入' + name" type="number"></u-input>
            </view>
            <view>
                <view class="size26 m-bot20">验证：</view>
                <u-input v-model="code" placeholder="请输入验证码">
                    <template slot="suffix">
                        <u-code ref="uCode" :seconds="60" changeText="x秒" @change="codeChange"></u-code>
                        <u-button :color="color" :text="tips" type="primary" size="small" @click="getCode" :customStyle="{padding: '0 8px !important'}"></u-button>
                    </template>
                </u-input>
            </view>
        </view>
        <view class="btn thmeBg margin40 flexac size32 white" @click="handleDonate">发起赠送</view>
    </view>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return {
            v_money: '',
            phone: '',
            doneeInfo: '', // 受赠人信息
            money: '',
            code: '',
            tips: '',
            fastClick: false,
            type: '2',
            title: ''
        }
    },
    computed: {
        ...mapState(['color','userInfo']),
        name() {
            const names = {
                '1': '积分',
                '2': '余额',
                '3': '收益',
                '4': '实体卡余额'
            }
            return this.title || names[this.type]
        }
    },
    onLoad(e){
        if(e.type) this.type = e.type
        if(e.title) this.title = e.title
        this.getMoney()
    },
    methods: {
        getMoney(){
			this.$http.post({
				url: '/osmxcxApi/getConfig'
			}).then(res=>{
                let result = res.data.userInfo
                if(this.type == 4) return this.v_money = result.v_t_wallet
                this.v_money = this.type == 1 ? result.v_jifen_yue : (this.type == 2 ? result.v_money : result.income)
			})
		},
        verifyUser(){
            if(!this.phone) return this.$Toast('手机号不能为空')
            // uView自带手机号验证方法，返回true则通过
            if(!uni.$u.test.mobile(this.phone)) return this.$Toast('手机号码不正确')
            this.$http.post({
                url: '/osmxcxApi/phoneGetUserInfo',
                data: {
                    phone: this.phone
                }
            }).then(res=>{
                if(res.errcode != 100) return this.$Toast(res.msg)
                if(!res.data.v_id) return this.$Toast('该用户不存在')
                this.doneeInfo = res.data
            })
        },
        codeChange(text){
            this.tips = text
        },
        getCode(){
            if(this.$refs.uCode.canGetCode){
                this.$showLoading('正在获取验证码')  
                this.$http.post({
                    url: '/zzj_singleSaleApi/reverCode',
                    data: {
                        phone: this.userInfo.phone
                    }
                }).then(res=>{
                    this.$hideLoading()
                    if(!res.status) return this.$Toast(res.msg)
                    this.$Toast('验证码已发送')
                    // 开始倒计时
                    this.$refs.uCode.start()
                })
            }
        },
        handleDonate(){
            if(!this.money) return this.$Toast('请输入' + this.name)
            if(!this.doneeInfo) return this.$Toast('请验证受赠人')
            if(!this.code) return this.$Toast('验证码不能为空')
            if(this.fastClick) return
            this.fastClick = true

            let url = ''
            let params = {
                phone: this.phone,
                give_v_id: this.doneeInfo.v_id,
                code: this.code
            }
            // 积分
            if(this.type == 1) { 
                url = '/osmxcxApi/giveFen' 
                params.giveFen = this.money
            }
            // 余额
            if(this.type == 2) {
                url = '/osmxcxApi/giveMoney'
                params.giveMoney = this.money
            }
            // 收益
            if(this.type == 3) {
                url = '/osmxcxApi/giveIncome'
                params.giveIncome = this.money
            }
            // 票据账户
            if(this.type == 4) {
                url = '/osmxcxApi/giveTwallet'
                params.giveTwallet = this.money
            }

            this.$http.post({
                url,
                data: params
            }).then(res=>{
                this.fastClick = false
                if(res.errcode != 100) return this.$Toast(res.msg)
                this.$Toast('赠送成功')
                this.getMoney()
                this.money = ''
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.topBg {
    height: 200rpx;
    .card {
        width: 690rpx;
        height: 200rpx;
        left: 30rpx;
        top: 30rpx;
        z-index: 10;
        image {
            top: 0;
            left: 0;
            z-index: -1;
        }
        .note {
            right: 20rpx;
            top: 20rpx;
        }
    }
}
.avatar {
    width: 106rpx;
    height: 106rpx;
    border-radius: 50%;
}
.btn {
    width: 300rpx;
    height: 80rpx;
    border-radius: 40rpx;
}
</style>